<template>
	<div>
		<div class="flex">
			<common-header :tittle="tittle" :showmore="false"></common-header>
			<div class="tab">
				<span class="tab-item" v-for="(item, index) in demo_tablist" :key="index" :class="{isactive: isActive == index}" @click="tabToggle(index)">{{item.name}}</span>
			</div>

		</div>

		<swiper @on-index-change="demo01_onIndexChange" v-model="demo01_index">
			<swiper-item class="swiper-demo-img" v-for="(item, index) in demo_tablist" :key="index">
				<scroller lock-x  @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
					<div class="box">
						<p class="box-item" v-for="i in bottomCount">{{i}} {{item.name}}</p>
						<load-more tip="loading"></load-more>
					</div>
				</scroller>
			</swiper-item>
		</swiper>


		
	</div>
	
	
	
	
</template>

<script>
	import { Tab, TabItem } from 'vux'
	import commonHeader from 'common/common-header-smallblack'
	import { Swiper, SwiperItem, Scroller, LoadMore } from 'vux'
	
	const baseList = [{
		url: ':',
		title: '1'
	}, {
		url: 'javascript:',
		title: '2'
	}, {
		url: 'javascript:',
		title: '3',
	}, {
		url: 'javascript:',
		title: '4',
	}, {
		url: 'javascript:',
		title: '5',
	}]



	export default {
		components: {
			Swiper,
			Scroller,
			LoadMore,
			SwiperItem,
			commonHeader
		},
		data() {
			return {
				tittle: "",
				demo01_list: baseList,
				demo01_index: 0,
				demo_tablist: [{
						id: 1,
						name: '视频'
					}, {
						id: 2,
						name: '人物'
					}, {
						id: 3,
						name: '专题'
					}, {
						id: 4,
						name: '体验'
					},

				],
				showList1: true,
				scrollTop: 0,
				onFetching: false,
				bottomCount: 20,
				isActive: 0
			}
		},
		mounted() {
			//  this.$nextTick(() => {
			//   this.$refs.scrollerEvent.reset({top: 0})
			// })
			// this.$nextTick(() => {
			//   this.$refs.scrollerBottom.reset({top: 0})
			// })
		},
		methods: {
			// tab切换标示
			tabToggle(index) {
				// 通过索引来改变内容切换
				this.demo01_index = index
				// 通过索引来改变tab标示
				this.isActive = index
			},
			demo01_onIndexChange(index) {
				// 左右切换来改变tab文字切换
				this.isActive = index
			},
			onScrollBottom() {
				if(this.onFetching) {
					// do nothing
				} else {
					this.onFetching = true
					setTimeout(() => {
						this.bottomCount += 10
						this.$nextTick(() => {
							this.$refs.scrollerBottom.reset()
						})
						this.onFetching = false
					}, 2000)
				}
			},
			onScroll(pos) {
				this.scrollTop = pos.top
			},
			onCellClick() {
				window.alert('cell click')
			},
			onClickButton() {
				window.alert('click')
			},
			changeList() {
				this.showList1 = false
				this.$nextTick(() => {
					this.$refs.scroller.reset({
						top: 0
					})
				})
			},
			// 左滑事件
			leftTouch() {
				console.log('左滑事件')
			},
			righttouch() {
				console.log('右滑事件')
			}
		}
	}
</script>

<style>
	
	.Router {
		background: #fff;
	}
	
	.flex {
		display: flex;
		position: fixed;
		justify-content: space-between;
		height: 50px;
		width: 100%;
		border-bottom:1px solid #F5F5F5;
		z-index: 999;
	}
	
	.tab {
		width: calc(100% - 50px);
		top: 0px;
		display: flex;
		position: fixed;

		justify-content: space-around;
		margin-left: 50px;
		justify-content: space-around;
		font-size: 15px;
		color: #999999;
		height: 50px;
		line-height: 50px;
	}
	
	.box1 {
		height: 100px;
		position: relative;
		width: 1490px;
	}
	
	.box1-item {
		width: 200px;
		height: 100px;
		background-color: #ccc;
		display: inline-block;
		margin-left: 15px;
		float: left;
		text-align: center;
		line-height: 100px;
	}
	
	.box1-item:first-child {
		margin-left: 0;
	}
	
	.box2-wrap {
		height: 300px;
		overflow: hidden;
	}
	
	.vux-indicator {
		display: none;
	}
	
	.vux-slider {
		width: 100%;
		margin-top:50px;
	}
	
	.vux-swiper {
		height: 100%;
	}
	
	.vux-swiper-item>div {
		overflow: visible!important;
	}
	
	.isactive {
		color: #16B0B7;
		position: relative;
		font-weight: bold;
		font-size: 18px;
	}
	
	.isactive:after {
		position: absolute;
		content: '';
		width: 50%;
		bottom: 0px;
		height: 3px;
		background: #16B0B7;
		left: 0;
		right: 0;
		margin: auto;
		border-radius: 3px;
	}
	
	.box-item {
		text-align: center;
	}
	/* 如果左滑与右滑与上下滚动有冲突 可以吧touch-action: none; 设置在滚动的父元素上 ok */
	/* .box {
  touch-action: none;
} */
</style>